<template>
	<view>
		<view class="article-cover">
			<view class="article-info" @click="toArticle(item.id)" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="article-title">
						{{item.title}}
					</view>
					<view class="user">
						<text class="user-name">{{item.user_name}}</text>
						<text class="time">{{item.time|getTime}}</text>
					</view>
				</view>
				<view class="right">
					<image :src="item.cover_img" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		name:"newspaper",
		data() {
			return {
				
			};
		},
		filters: {
			getTime(time) {
				return moment(time * 1000).format('YYYY-M-DD');
			}
		},
		props: {
			list: {
				type: Array,
				default() {
					return [];
				}
			}
		},
		methods: {
			toArticle(id) {
				uni.navigateTo({
					url: "/pages/article/article?id="+id,
					fail: (err) => {
						console.log(err) //打印错误信息
					}
				})
			},
			init() {
				
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.article-cover {
		padding: 10rpx 24rpx 0;
		box-sizing: border-box;
		
		.article-info {
			display: flex;
			padding-top: 20rpx;
			background-color: #fff;
			border-bottom: 1px solid #edebee;
			.left {
				flex: 1;
				.article-title {
					font-size: 34rpx;
					height: 140rpx;
					/* 多行文本溢出隐藏 */
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
				.user {
					margin: 15rpx 0 30rpx;
					color: #999;
					font-size: 26rpx;
					.user-name {
						margin-right: 12rpx;
					}
				}
			}
			.right {
				width: 240rpx;
				height: 200rpx;
				margin-left: 30rpx;
				background-color: #fff;
				overflow: hidden;
				border-radius: 5px;
				image {
					width: 100%;
					// height: 100%;
					border-radius: 5px;
				}
			}
		}
		
	}
	
	

</style>
